<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" id="login">登录</button>
		<p>一个商场网站，有头部header，有导航nav，有购物车cart等等模块</p> 
		<p><p>依赖于登录成功后的用户信息。</p> 
		<p>而用户不知道什么时候会登陆。</p> 
		<p>需要将以上各个模块与登录模块做一个发布-订阅</p> 
		
		<script type="text/javascript">
			// 事件队列
			class EventQueue {
				constructor() {
					this.isOnce = false
				    this._event = {}
				}
				$on(eventName,fn){
					this._event[eventName] = this._event[eventName] || []
					this._event[eventName].push(fn)
				}
				$emit(eventName,...args){
					if(this._event[eventName]){
						this._event[eventName].forEach(callback=>{
							callback(...args)
						})
						
					}
				}
				$off(eventName,callback){
					if(!eventName){
						throw new Error('eventName is null')
					}
					if(callback && typeof callback !='function'){
						throw new Error('callback format is not correct')
					}
					if(!callback){
						delete this._event[eventName]
					}else{
						this._event[eventName].forEach((fn,index)=>{
							if(fn==callback){
								this._event[eventName].splice(index,1)
							}
						})
					}
				}
			}
			
			
			// 一个商场网站，有头部header，有导航nav，有购物车cart等等模块
			// 依赖于登录成功后的用户信息。
			// 而用户不知道什么时候会登陆。
			// 需要将以上各个模块与登录模块做一个发布-订阅
			
			
			let login = new EventQueue()
			var header = (function(){
				return {
					init:()=>{
						login.$on('loginSuccess',header.setAvatar)
					},
					setAvatar:function(userinfo){
						console.log(`设置header的头像及增加用户信息${JSON.stringify(userinfo)}`);
					}
				}
			})()
			var nav = (function(){
				
				return {
					init:()=>{
						login.$on('loginSuccess',nav.setAvatar)
					},
					setAvatar(userinfo){
						console.log(`设置nav的头像及增加用户信息${JSON.stringify(userinfo)}`);
					}
				}
			})()
			var cart = (function(){
				return {
					init:()=>{
						login.$on('loginSuccess',cart.getCartData)
					},
					getCartData(userinfo){
						console.log(`获取${userinfo.name}购物车数据`);
					}
				}
			})()
			
			
			header.init()
			nav.init()
			cart.init()
			
			document.getElementById('login').addEventListener('click',()=>{
				login.$emit('loginSuccess',{id:1,name:'张三',age:18})
				login.$off('loginSuccess')
			})
		
		</script>
	</body>
</html>
